<template>
    <div class="login-content">
        <el-tabs type="border-card" class="tabs" stretch @tab-click="tabSwitch" v-model="defaultTab">
            <el-tab-pane label="密码登录" name="form">
                <el-card class="animated flipInY" style="width: 100%;height: 100%;padding: 0">
                        <div slot="header" class="el-card-header">
                            <div style="clear: both;"></div>
                            <h2 class="login-title">{{$t('login.title')}}</h2>
                        </div>
                        <el-form :rules="rules" :model="loginForm" ref="loginForm" label-width="60px">
                            <el-form-item :label="$t('login.account')" prop="userName" style="position:relative" >
                                <el-input style="margin-left:20px;width:calc(100% - 20px)" type="text" v-model="loginForm.userName" @keyup.enter.native="goToPwdInput"></el-input>

                            </el-form-item>
                            <el-form-item :label="$t('login.password')" prop="password">
                                <el-input style="margin-left:20px;width:calc(100% - 20px)" type="password" v-model="loginForm.password" @keyup.enter.native="onLogin" ref="pwd"></el-input>
                            </el-form-item>
                            <el-form-item :label="$t('login.remember')" label-width="80px">
                                <el-switch v-model="remember"></el-switch>
                            </el-form-item>
                            <el-button type="primary" @click="onLogin" :loading="loading">{{$t('login.login')}}</el-button>
                        </el-form>
                    </el-card>
            </el-tab-pane>
            <el-tab-pane label="人脸登录" name="face">
                <face-camera @success="checkSuccess" ref="camera"></face-camera>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
    import {get,set,remove} from "../../utils/Auth";
    import FaceCamera from "@/components/face/FaceCamera";
    import { Loading } from 'element-ui';
    export default {
        name: "login",
        components:{
            FaceCamera
        },
        data(){
            return {
                loadingInstance:null,
                defaultTab:'form',
                remember:false,
                loading:false,
                loginForm: {
                    userName: '',//默认学生登录
                    password: ''
                },
                rules: {
                    userName: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { required: true, trigger: 'blur' },
                        { required: true, trigger: 'change' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { required: true, trigger: 'blur' },
                        { required: true, trigger: 'change' }
                    ]
                }
            }
        },
        methods:{
            onLogin(){
                let g=this;
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        if (g.loginForm.userName!=g.$store.getters.GET_AUTH.userName || g.loginForm.password!=g.$store.getters.GET_AUTH.password){
                            this.$alert('查不到此用户信息')
                            remove();
                        }else{
                            set({userName:g.loginForm.userName,password:g.loginForm.password});
                            g.$router.push('/')
                        }

                    } else {
                        return false
                    }
                })
            },
            checkSuccess(Img){
                let g=this;
                g.loadingInstance=Loading.service({
                    text:'正在识别您的身份,请稍等……',
                    background:'black'
                });
                let message={strategy:'3',content:Img};
                this.$store.getters.GET_SOCKET.send(JSON.stringify(message));
                this.$store.getters.GET_SOCKET.onmessage=(evt)=>{
                    let result=JSON.parse(evt.data);
                    let checkResult;
                    if (result.status==="200"){
                        checkResult=JSON.parse(result.content).result;
                    }
                    if (!g.isNullOrEmpty(checkResult.user_list) && checkResult.user_list.length>0){
                        set({user:'admin'});
                        g.$nextTick(()=>{
                            g.$router.push('/');
                        })

                    }else{
                        g.$alert('无法从人脸库中找到对应信息,请确认是否已录入');
                    }
                    g.loadingInstance.close();
                }
            },
            tabSwitch(tab){
                if (tab.name=='form'){
                    this.$refs.camera.closeVideo();
                }else{
                    this.$refs.camera.openVideo();
                }
            }
        }
    }
</script>
<style scoped>
.login-content{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: mix(#494166, #424b50) url('../../login/static/login.png') center no-repeat;
    background-size: cover;
    overflow: hidden;
    .tabs {
        position: absolute;
        top: 50%;
        left: 45%;
        margin: -300px 0 0 -200px;
        width: 600px;
        height: 450px;
        background: #fff;
        .el-card-header {
            text-align: center
        }

        .login-title {
            margin: 0;
            text-align: center;
        }
        .el-input /deep/ .el-input__inner {
            text-indent: 12px;
        }

        .el-button--primary {
            width: 100%;
        }
    }
}
.el-tabs--border-card > .el-tabs__content {
    padding: 0px;
}
</style>